<template>
  <div
    ref="bar"
    id="line"
    style="width: 400px; height: 400px"
    v-if="flag"
  ></div>
</template>

<script>
import { getRequest } from "../../util/request";
export default {
  name: "MyLineChart",
  data() {
    return {
      userId: "",
      series: [],
      flag: false,
    };
  },
  methods: {
    initEcharts() {
      let myEcharts;
      if (myEcharts != null && myEcharts != "" && myEcharts != undefined) {
        myEcharts.dispose(); //销毁
      }
      myEcharts = this.$echarts.init(document.getElementById("line"));
      let option = {
        title: {
          // text: "茶叶种类销售量",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          //   data: ["红茶", "黑茶", "绿茶", "黄茶", "乌龙茶", "白茶"],
        },
        yAxis: {
          type: "value",
        },
        legend: {},
        /*  [
          {
            name: "Email",
            type: "line",
            // stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "l",
            type: "line",
            stack: "Total",
            data: [190, 182, 101, 134, 90, 230, 210],
          },
        ], */
        series: [
          ...this.series.map((item) => {
            (item.type = "line"), (item.data = item.number);
            delete item.number;
            // console.log(item);
            return item;
          }),
        ],
      };
      myEcharts.setOption(option);
    },
    getSaleResult() {
      const requestResult = getRequest(
        "user/getSaleResult",
        `?userId=${this.userId}`
      );
      requestResult.then(
        (response) => {
          if (response.data.length) {
            // console.log(response.data);
            this.flag = true;
            this.series = response.data;
            this.$nextTick(() => {
              this.initEcharts();
            });
          }
        },
        (err) => {
          throw err;
        }
      );
    },
  },
  mounted() {
    this.userId = this.$cookie.get("userId");
    this.getSaleResult();
  },
  updated() {
    // this.getSaleResult();
    // this.initEcharts();
  },
};
</script>

<style>
</style>